<template>
    <div class="database_frame">
        <div style="width:98%;margin-left:1%;height:100%;padding: 2%;padding-top:0%;padding-left:0%;overflow-y: scroll;">
            <div style="width:100%;height:7%;position: absolute;padding-top:2%;padding-left:2%;padding-bottom: 3%;  background-color: white;">
                <el-breadcrumb separator="/">
  <el-breadcrumb-item>数据表列表</el-breadcrumb-item>
  <el-breadcrumb-item>数据表详情</el-breadcrumb-item>
    </el-breadcrumb>
            </div>
            <div style="margin-top:6%;margin-left:3%;height:100%">
            <el-card v-for="v, i in tables" :key="i">
               <h2 slot="header" style="text-align:center">{{ v.tableName }}</h2>
               <div style="padding:5%">
                <span v-for="column,i1 in v.columnList" :key="i1" style="width:50%;display: inline-block;margin-bottom: 1.2%;">
                    {{column.columnName}} {{column.dataType}}
                </span>
                </div>
            </el-card>
        </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name: 'DataBaseManage'
    ,
    data() {
        return {
            tables: []
        }
    },
    mounted() {
        this.$basicAxios(this.$manage.getTables(this.token), (resp) => {
            this.tables = resp.data.data
        })
    },
    computed: {
        ...mapState("userAbout", ['token'])
    }
}
</script>

<style scoped lang="less">

.database_frame {
    width: 100%;
    height: 100%;
}
/deep/.el-card__body{
    height:auto;
    font-size:calc(1.0rem + calc(calc(1.2 - 1.0) * calc(calc(100vw - 600px) / 3000)))
}
/deep/.el-card{
    float: left;
    width:45%;
    margin-right:5%;
    margin-bottom: 4%;
    height:50%;
}


</style>